/*
 * @Description: 光盘管理弹窗
 * @Author: Rfan
 * @Date: 2022-06-25 15:02:05
 * @LastEditTime: 2023-01-07 11:53:47
 */

import { useEffect, useState } from 'react';
import { Button, Form, message, Modal } from 'antd';
import type { FC } from 'react';
import CDForm from './CDForm';
import type { ICommonDialog } from '@/interfaces/global';
import { addDiskType } from '@/api/archives/export';
import { useCDVolumManageContext } from '../../contexts/CDVolumManageContext';

interface AddCDDialogProps extends ICommonDialog {}

const AddCDDialog: FC<AddCDDialogProps> = (props) => {
  console.log('add cd dialog', props.visible);
  const { addDiskTypeList } = useCDVolumManageContext();
  const { visible, onClose } = props;
  const [form] = Form.useForm();

  useEffect(() => {
    if (visible) {
      //
    }
  }, [visible]);

  /**
   * @description: 关闭弹窗
   */
  const onCancel = () => {
    onClose();
  };

  /**
   * @description: 保存表单方法
   */
  const onFinish = (vals: any) => {
    console.log('cd type finish', vals);
    addDiskTypeList(vals).then(() => {
      message.success('添加成功');
      onClose();
    });
  };

  return (
    <Modal
      title="光盘参数"
      visible={visible}
      width={600}
      destroyOnClose
      onCancel={onCancel}
      footer={[
        <Button key="close" onClick={onCancel}>
          关闭
        </Button>,
        <Button
          key="export"
          type="primary"
          onClick={() => {
            form.submit();
          }}
        >
          保存
        </Button>
      ]}
    >
      <Form
        form={form}
        initialValues={{ volumeType: 0, volumeUnit: 1 }}
        labelCol={{ span: 6 }}
        wrapperCol={{ span: 16 }}
        preserve={false}
        onFinish={onFinish}
      >
        <CDForm />
      </Form>
    </Modal>
  );
};

export default AddCDDialog;
